<template>
	<div class="tab-body">
		<div class="search">
			<el-form ref="form" :model="searchParams" label-width="80px">
				<el-row>
					<el-col :span="6">
						<el-form-item label="用户名称">
							<el-input v-model="searchParams.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="登录名">
							<el-input v-model="searchParams.lname"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="手机号">
							<el-input v-model="searchParams.mobile"></el-input>
						</el-form-item>
					</el-col>
					
					<div class="search-btn">
						<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
						<el-button @click="clearSearchVal">清空</el-button>
					</div>
				</el-row>
			</el-form>
		</div>
		
		<div class="dataTable autoFlex" v-if="listData">
			<qlh-table class="table" ref="userShoppingCartTable" :data="listData.records" stripe border height="auto" @selection-change="selectionChange"
			 v-loading="listLoading" :tableToolButton="tableToolButton" :excelProp="excelProp">
				<qlh-table-column type="selection" width="55" fixed="left" ignored :editable="false"></qlh-table-column>
				<qlh-table-column prop="name" label="姓名" sortable></qlh-table-column>
				<qlh-table-column prop="lname" label="登录名" sortable></qlh-table-column>
				<qlh-table-column prop="mobile" label="手机"></qlh-table-column>
				<qlh-table-column prop="count" label="产品数量"></qlh-table-column>
				<qlh-table-column prop="sum" label="总数量"></qlh-table-column>
				<!-- <qlh-table-column prop="dictionary_sex" label="性别"></qlh-table-column> -->
				<qlh-table-column label="操作" fixed="right" width="300" ignored :editable="false">
					<template slot-scope="scope">
						<div class="dataTable-operator">
							<el-button v-has-permission-code-and="'003000300005'" size="mini" icon="el-icon-search" @click="toDetail(scope.$index, scope.row)">详情
							</el-button>
						</div>
					</template>
				</qlh-table-column>
			</qlh-table>
			<div class="pageBar">
				<el-pagination @size-change="sizeChange" @current-change="currentChange" :total="listData.total" :page-size="page.size"
				 :current-page="page.current" :layout="this.$constant.page.layout" :page-sizes="this.$constant.page.pageSizes"></el-pagination>
			</div>
		</div>
		<edit ref="edit" :disabled="false"></edit>
	</div>
</template>
<script>
	import edit from './edit.vue';
	import selectRoleTreeDialog from '@/components/biz/selectRoleTreeDialog/selectRoleTreeDialog.vue';
	import selectDepartmentTreeDialog from '@/components/biz/selectDepartmentTreeDialog/selectDepartmentTreeDialog.vue';
	import qlhTable from '@/components/qlhTable/qlhTable.vue';
	import qlhTableColumn from '@/components/qlhTable/qlhTableColumn.vue';
	import api from '@/api/tgb/userShoppingCart/userShoppingCart.js';
	export default {
		name: 'user',
		components: {
			edit,
			selectRoleTreeDialog,
			selectDepartmentTreeDialog,
			qlhTable,
			qlhTableColumn
		},
		data() {
			return {
				searchParams: {},
				isShowMoreSearch: false,
				listLoading: false,
				listData: [],
				selected: [],
				page: new this.$constant.pageObj(),
				showedCol: [],
				editableCol: [],
				/**
				 * 表格自定义工具栏按钮
				 * name:按钮名
				 * icon:按钮图标
				 * func:按钮点击事件
				 */
				tableToolButton: [{
					name: "customButton",
					icon: "el-icon-arrow-down",
					func: this.customButton
				}],
				excelProp: {
					excelName: '用户信息',
					sheetname: '部门信息'
				}
			};
		},
		methods: {
			customButton() {
				console.log("自定义事件");
			},
			//获取数据
			list() {
				this.listLoading = true;
				let params = this.$utils.merger(this.searchParams, this.page);
				api.list(params, response => {
					this.listData = response.data;
					this.listLoading = false;
				})

			},
			//去详情
			toDetail(index, row) {
				console.log(row)
				let detailParameter = {
					uid: row.uid
				};
				this.$refs.edit.open(detailParameter, '详情', true);
			},
			//改变选择项
			selectionChange(val) {
				//清空
				this.selected = [];
				for (let item of val) {
					this.selected.push(item.id);
				}
			},
			//改变每页显示数量
			sizeChange(val) {
				this.page.size = val;
				this.list();
			},
			//改变现在的页码
			currentChange(val) {
				this.page.current = val;
				this.list();
			},

			//搜索
			search() {
				this.list();
			},
			//清空搜索框
			clearSearchVal() {
				this.searchParams = {};
			}
		},
		mounted() {
			this.list();
		}
	};
</script>

<style lang="scss" scoped="scoped">
	@import '~common/custom/css/common.scss';
</style>
